<template>
	<div class="">
		<a-form
		    layout="inline"
		    :model="formState"
		    @finish="handleFinish"
			style="margin-top: 10px;margin-bottom: 10px;"
		  >
			  <a-form-item  >
				<a-button type="primary" @click="customButton()">自定义按钮</a-button>
			  </a-form-item>
		  
		    <a-form-item label="姓名">
		      <a-input v-model:value="formState.title" placeholder="请输入姓名"/>
		    </a-form-item>
		    <a-form-item label="住址">
		      <a-input v-model:value="formState.password" placeholder="请输入住址"/>
		    </a-form-item>
		    <a-form-item>
				  <a-button type="primary" html-type="submit" > 搜 索  </a-button>
		    </a-form-item>
		  </a-form>
		<a-table :pagination="false" :columns="columns" :data-source="data">
			<template #operation="{ record  }">
				<a-space>
					<a-button @click="editFun(record)" type="primary" size="small">
						编辑
					</a-button>
					<a-popconfirm title="确认删除？" @confirm="sureDel(record)" ok-text="是" cancel-text="否">
						<a-button danger type="primary" size="small">
							删除
						</a-button>
					</a-popconfirm>
				</a-space>
			</template>
		</a-table>

		<a-modal v-model:visible="editModel" title="编辑" @ok="handleOk">
			<template #footer>
				<a-button key="back" @click="editModel = false">取消</a-button>
				<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</a-button>
			</template>
			<a-form>
				<a-form-item label="菜单名称:">
					<a-input v-model:value="editPost.name" placeholder="请输入菜单名称" />
				</a-form-item>
				<a-form-item label="是否菜单:">
					<a-select v-model:value="editPost.name" placeholder="please select your zone">
						<a-select-option value="shanghai">是</a-select-option>
						<a-select-option value="beijing">否</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>

</template>
<script>
	import { defineComponent, ref, reactive } from 'vue';
	import { apiTable } from "@/api/table.js"
	const columns = [{
			title: 'ID',
			dataIndex: 'id',
		},
		{
			title: '姓名',
			dataIndex: 'name',
		},
		{
			title: '地址',
			dataIndex: 'address',
		},
		{
			title: '操作',
			dataIndex: 'operation',
			slots: {
				customRender: 'operation'
			},
		},
	];
	const formState = reactive({
	      user: '',
	      password: '',
	    });
	const data = [{
		id:1,
			name: '张三',
			age: 60,
			address: '中国-四川',
		},
		{
			id:2,
			name: '李四',
			age: 32,
			address: '中国-重庆',
		},
	];
	
	const editPost = reactive({
		name: ''
	})
	const editModel = ref(false);
	const editFun = (type,e) => {
		editModel.value = true
	}
	
	const customButton = () => {
		alert("自定义按钮！")
	}
	
	const sureDel = (e) => {
		alert("你点击了确认删除操作！")
		console.log(e)
		// dataSource.value = dataSource.value.filter(item => item.key !== key);
	};
	
	export default defineComponent({
		setup() {
			apiTable().then(e=>{
				console.log("table",e)
			})
			return {
				data,
				columns,
				
				editPost,
				formState,
				
				customButton,
				editModel,
				editFun,
				sureDel,
			};
		},
	});
</script>
<style lang="scss" scoped="scoped">
	
</style>